<template>
	<view>
		<view class="">
			<u-navbar title="个人信息" back-icon-color="#000" title-color="#000" :border-bottom="false"></u-navbar>
		</view>
		<u-cell-group>
			<u-cell-item @click="selectAvatar" :title-style="{fontSize:'30rpx',color:'#000000'}" title="头像"
				:arrow="false">
				<u-avatar :src="vk.getVuex('$user.userInfo.avatar')" slot="right-icon" size="80"></u-avatar>
			</u-cell-item>

			<u-cell-item :title-style="{fontSize:'30rpx',color:'#000000'}" title="主页背景" :arrow="false"
				:border-bottom="false">
				<u-avatar mode="square" slot="right-icon" size="80"></u-avatar>
			</u-cell-item>

			<u-gap height="15" bg-color="#F6F6F6"></u-gap>

			<u-cell-item @click="cellClick('nickname')" :title-style="{fontSize:'30rpx',color:'#000000'}" title="昵称" :arrow="false"
				:value="vk.getVuex('$user.userInfo.nickname')||'null'">

			</u-cell-item>
			<u-cell-item :title-style="{fontSize:'30rpx',color:'#000000'}" title="性别" :arrow="false"
				:value="vk.getVuex('$user.userInfo.sex')||'未设置'">

			</u-cell-item>
			<u-cell-item :title-style="{fontSize:'30rpx',color:'#000000'}" title="生日" :arrow="false"
				:value="vk.getVuex('$user.userInfo.bothday')||'未设置'"> 

			</u-cell-item>
			<u-cell-item :title-style="{fontSize:'30rpx',color:'#000000'}" title="城市" :arrow="false"
				:value="vk.getVuex('$user.userInfo.city')||'未设置'" :border-bottom="false">

			</u-cell-item>

			<u-gap height="15" bg-color="#F6F6F6"></u-gap>

			<u-cell-item :title-style="{fontSize:'30rpx',color:'#000000'}" title="签名" :arrow="false"
				:border-bottom="false">

			</u-cell-item>
		</u-cell-group>
		<u-popup mode="bottom" v-model="popshow">
			<view style="background-color: #ffffff;padding: 40rpx;position: relative;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;">
				<view class="" style="border: 0 solid #1B975A;border-bottom-width: 1px;">
					<u-input type="textarea" height="44" v-model="form.value" :maxlength="popMaxlenght" :placeholder="popPlaceholder"></u-input>
				</view>
				<view class="" style="margin-top: 50rpx;">
					
					<u-button style="float: right;"  @click="popConfirm" type="primary" :plain="true"
						:custom-style="{width:'100rpx',border:'none',backgroundColor:'#ecf8ea !important',color:'#1B975A !important',fontSize:'27rpx'}"  
						size="medium" :hair-line="false" ripple>
						确认
					</u-button>
					<view class="" style="clear: right;">
						
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			return {
				popshow:false,
				form:{
					value:''
				},
				popPlaceholder:'',
				cellMode:'',
				popMaxlenght:0
			}
		},
		onPageScroll(e) {
			that.scrollTop = e.scrollTop;
		},
		onLoad(options) {
			
			that = this;
			vk = that.vk;
			that.options = options;
			that.init(options);
		},
		methods: {
			init(options) {
				if (!options) options = that.options;
			},
			selectAvatar() {

				// uni.navigateTo({
				// 	url: '../../u-avatar-cropper/u-avatar-cropper'
				// })
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: 'pages/u-avatar-cropper/u-avatar-cropper?destWidth=300&rectWidth=200&fileType=png',
					// 内部已设置以下默认参数值，可不传这些参数
					
				})
				uni.$on('uAvatarCropper', async (path)=>{
					uni.showLoading({
						title:'正在上传'
					})
					let res = await uniCloud.uploadFile({
						filePath:path,
						cloudPath:'avatar'+vk.getVuex('$user.userInfo._id')+'.png'
					})
					
					vk.userCenter.setAvatar({
					  data: {
					    avatar: res.fileID,
						deleteOldFile:true
					  },
					  success: function(data) {
					    // 成功后的逻辑
						
					  }
					});
				})
			},
			popConfirm(){
				switch(this.popMode){
					case 'nickname':
						if(this.form.value == vk.getVuex('$user.userInfo.nickname')){
							this.popshow = false;
							break
						}
						vk.userCenter.updateUser({
						  data: {
						    nickname: this.form.value,
						  },
						  success:(data) => {
						    // 成功后的逻辑
							this.popshow = false;
						  }
						});

						break
				}
			},
			cellClick(e){
				this.popshow = true;
				this.popMode = e;
				switch(e) {
					case 'nickname':
						this.form.value = vk.getVuex('$user.userInfo.nickname')
						this.popMaxlenght = 8
						this.popPlaceholder = '请设置昵称(最长8位)'
						break
				}
			}   
		}
	}
</script>

<style lang="scss" scoped>

</style>
